<template>
  <div class="videoComponent">
    <!-- 文章及作者信息 -->
    <div class="videoInfo">
      <div class="bloggerInfo">
        <img :src="bloggerInfo.bloggerPic">
        <div class="detailInfo">
          <p class="bloggerName">{{bloggerInfo.bloggerName}}</p>
          <p class="fansNum">{{bloggerInfo.fansNum}}粉丝</p>
        </div>
        <div class="guanzhu">关注ta</div>
      </div>
      <div class="blogPic">
        <img :src="bloggerArticle.articlePic" alt>
         <img :src="playLogo" alt="" class="playLogo">
      </div>
    </div>
    <!-- 文章浏览情况 -->
    <div class="viewInfo">
      <span class="updateTime">
        <i class="iconfont">&#xe617;</i>
        {{bloggerArticle.publishTime}}
      </span>
      <span class="viewNum">
        <i class="iconfont">&#xe613;</i>
        {{bloggerArticle.viewNum}}
      </span>
      <span class="commentNum">
        <i class="iconfont">&#xe603;</i>
        {{bloggerArticle.commentNum}}
      </span>
      <span class="heartNum">
        <i class="iconfont">&#xe659;</i>
        {{bloggerArticle.collectNum}}
      </span>
    </div>
    <!-- 评论信息 -->
    <div class="commentInfo">
      <CommentList :commentPeoples="commentPeoples" />
    </div>
    <router-link :to="{name:'AllComments',params:{articleId:bloggerArticle.articleId}}">
      <p class="viewMore">查看更多评论</p>
    </router-link>  
  </div>
</template>
<script>
import CommentList from "./commentList.vue"
export default {
  name: "VideoComponent",
  data() {
    return {
      bloggerInfo: {},
      bloggerArticle: {},
      commentPeoples: [],
      playLogo: require("../assets/icon/playLogo/play_logo.png")
    }
  },
  mounted() {
    this.$axios.get("http://localhost:3000/api/bloggerInfo",{
      params: {
        bloggerId: this.$route.params.bloggerId
      }
    })
    .then(res => {
      console.log(res.data);
      this.bloggerInfo = res.data[0];
      this.bloggerArticle = this.bloggerInfo.bloggerArticles[0];
      // console.log(this.bloggerArticle)
      this.commentPeoples = this.bloggerArticle.commentPeople;
    })
    .catch(error => {
      console.log(new error(error))
    })
  },
  components: {
    CommentList
  }
}
</script>
<style lang="less" scoped>
  .videoComponent{
    background-color: #fff;
    width: 94%;
    padding: 10px;
    .videoInfo{
      position: relative;
      top: -70px;
      left: 5px;
      background-color: #fff;
      width: 92%;
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0 2px 20px rgba(0,0,0,.15);
      .bloggerInfo{
        overflow: hidden;
        img{
            width: 80px;
            height: 80px;
            float: left;
          }
        
        .detailInfo{
          float: left;
          font-size: 16px;
          color: #4d4c4c;
          margin: 20px 30px 0;
        }
        .guanzhu{
          float: left;
          height: 25px;
          line-height: 25px;
          font-size: 12px;
          color: #4d4c4c;
          border: 1px solid #4d4c4c;
          padding: 0 10px;
          border-radius: 12.5px;
          margin: 30px 0 0 60px;
        }
      }
      .blogPic{
        position: relative;
        margin-top: 15px;
        clear: both;
        img{
          width: 100%;
          height: 150px;
        }
        .playLogo{
          width: 80px;
          height: 80px;
          position: absolute;
          top: 35px;
          left: 50%;
          margin-left: -40px;
        }
      }
    }

    .viewInfo{
      margin-top: -40px;
      color: #808080;
      font-size: 14px;
      span{
        margin-right: 20px;
      }
      .viewNum{
        margin-right: 94px;
      }
      .commentNum, .heartNum{
        i{
          font-size: 20px;
          vertical-align: middle;
        }
      }
    }
    .commentInfo{
      border-bottom: 0.5px solid #808080;
    }
    .viewMore{
      text-align: center;
      color: #ff406f;
      font-size: 12px;
      margin-top: 10px;
    }
    
  }
</style>


